﻿<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        .right{
            color:green;

        }
        .wrong{
            color:red;
        }
    </style>
</head>
<body>
    <div class="register">
        <input type="password"  name="name" value="" class="ipt"/>
        <p class="message">请输入4~8位密码</p>
    </div>
    <script>
          // 需求：表单失去焦点，如果密码不合法，则 p 标签类样式更改，内容也相应变化
          //  如何合法，也进行相应变化
        let input = document.querySelector('input');
        let p = document.querySelector('p');
        input.onblur = function () {
            let value = input.value;
            if (value.length >= 4 && value.length <= 8) {
                p.className = 'message right';
                p.innerHTML = "密码合法";
            } else {
                p.className = 'message wrong';
                p.innerHTML = "密码不合法";
            }
        }
    </script>
</body>
</html>